<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <style>
        a {
            color: darkolivegreen;
        }

        .btn-success a {
            color: #fff
        }
    </style>
</head>

<body>
    <div class="container">
        <table border="1px" class="table table-striped table-hover table-bordered">
            <thead class="">
                <tr class="info">
                    <th>用户ID</th>
                    <th>用户姓名</th>
                    <th>用户性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script>
        function del(id) {
            if (confirm("确定删除数据吗") == true) {
                $.get('/del', { id: id }).done(function (res) {
                    // location.href='./index.html'
                    location.reload();
                })
            }
        }
        // 获取数据
        $.get('/select').done(function (result) {
            console.log(result)
            $(result).map(function (index, value) {
                var msg = '';
                msg += '<tr class="success"><td>' + value.id + '</td><td>' + value.username + '</td><td>' + value.age + '</td><td><button class="btn btn-danger" onclick="del(' + value.id + ')">删除</button><button class="btn btn-Warning"><a href="./edit.html#' + value.id + '">编辑</a></button><button class="btn btn-success"><a href="./add.html">添加</a></button></td></tr>'
                $('table tbody').append(msg)
            })

        });
    </script>
</body>

</html>